---
title: gluestack-ui Box Component | Installation, Usage, and API

description: Flexible layout tool with customizable styles and props for simple to complex structures.

pageTitle: Box

pageDescription: Flexible layout tool with customizable styles and props for simple to complex structures.

showHeader: true

tag: RSC
---

import { Meta } from '@storybook/addon-docs';
import { useRef, useEffect, useState } from 'react';

<Meta title="with-nativewind/Components/Layout/Box" />

import { Box } from '../../core-components/nativewind';
import { Text } from '../../core-components/nativewind/text';

import { transformedCode } from '../../utils';
import { AppProvider, CodePreview, Tabs } from '@gluestack/design-system';

import Wrapper from '../../core-components/nativewind/Wrapper';
import { CollapsibleCode } from '@gluestack/design-system';

This is an illustration of **Box** component.

<Wrapper>
  <CodePreview
      showComponentRenderer={ true }
    showArgsController = { false}
    metaData = {{
      code: `
<Box
  className="bg-primary-500 p-5"
>
  <Text className='text-typography-0'>
    This is the Box
  </Text>
</Box>
`,
        transformCode: (code) => {
          return transformedCode(code);
        },
          scope: {
        Wrapper,
          Box,
          Text,
        },
      argsType: { },
    }
  }
  />
</Wrapper>

<br/>

## Installation

<Tabs value="cli" type="section">
  <Tabs.TabList>
      <Tabs.Tab value="cli">
        <Tabs.TabTitle>CLI</Tabs.TabTitle>
      </Tabs.Tab>
     <Tabs.Tab value="manual">
        <Tabs.TabTitle>Manual</Tabs.TabTitle>
     </Tabs.Tab>
  </Tabs.TabList>
  <Tabs.TabPanels>
    <Tabs.TabPanel value="cli">
<>

### Run the following command:
  ```bash
  npx gluestack-ui add box
  ```
</>
    </Tabs.TabPanel>
    <Tabs.TabPanel value="manual"> 
<>

### Step 1: Copy and paste the following code into index.tsx in your project.
<CollapsibleCode>

```jsx 
%%-- File: core-components/nativewind/box/index.tsx --%% 
```
</CollapsibleCode>

> Note: **Step 2 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**

### Step 2(optional): Copy and paste the following code into index.web.tsx in your project.
<CollapsibleCode>

```jsx 
%%-- File: core-components/nativewind/box/index.web.tsx --%% 
```
</CollapsibleCode>

### Step 3: Copy and paste the following code into styles.tsx in your project.
<CollapsibleCode>

```jsx 
%%-- File: core-components/nativewind/box/styles.tsx --%% 
```
</CollapsibleCode>

### Step 4: Update the import paths to match your project setup.
</>
    </Tabs.TabPanel>
  </Tabs.TabPanels>
</Tabs>

## API Reference

To use this component in your project, include the following import statement in your file.

```jsx
import { Box } from '@/components/ui/box';
```

```jsx
export default () => <Box />;
```

### Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

#### Box

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
